<template>
  <el-container id="app" class="container">
    <el-header height="80px"><Header /></el-header>
    <el-main>
      <div class="layout">
        <router-view></router-view>
      </div>
      <Footer />
      <!--   回到顶部组件   -->
      <el-backtop target=".el-main" :bottom="backBottom">
        <img src="./assets/goTop.png" alt="" />
      </el-backtop>
    </el-main>
    <!--  播放条组件  -->
    <playBar v-if="isShowPlayBar"/>
    <!--  登录组件  -->
    <Login v-if="loginDialogVisible" />
  </el-container>
</template>

<script>
 // 导入组件引用
import Header from "./components/Header";
import playBar from './components/common/play-bar.vue'
import Login from "./components/Login";
import Footer from "./components/Footer";
import { mapState } from "vuex";
export default {
    name: 'App',
    components: {
        Header,
        playBar,
      Login,
      Footer,
    },
  data() {
    return {
      backBottom: 80,
    };
  },
  computed: {
/*
  不展示播放器的情况:
    1. 在'/mv',即播放mv的界面就无需展示
    2. 在'/video',即播放歌曲的界面就无需展示
 */
    isShowPlayBar() {
      return this.$route.path !== "/mvPlay" && this.$route.path !== "/video";
    },
    ...mapState({
      loginDialogVisible: (state) => state.user.loginDialogVisible,
    }),
  },
};
</script>

<style lang="less" scoped>
// 隐藏页面滚动条-谢称石
body::-webkit-scrollbar {
  display: none;
}
.container {
    height: 100%;
}
.layout {
  min-height: calc(100vh - 80px - 40px);
}
</style>
